<template>
    <div class="top-title">
        向
        <span v-for="(item, index) in custInfoCount.work_user" :key="item.id">
            <span v-if="index <= 2">【{{ item.name }}】{{ index <= 1 ? '、' : '' }}</span>
        </span>

        等{{ custInfoCount.work_user ? custInfoCount.work_user.length : 0 }}个成员、{{
            custInfoCount.department ? custInfoCount.department.length : 0
        }}个部门 共计<span class="active">{{ custInfoCount.cust_num || 0 }}</span
        >位客户，发送入群邀请通知。
    </div>

    <div class="container">
        <div class="container-item">
            <div class="title">
                已邀请客户
                <el-tooltip content="通过该活码，添加的成员客户数，包含删除员工，算累计值。" placement="top">
                    <img class="help_icon" src="@/assets/image/customer/help_icon.png" alt="" />
                </el-tooltip>
            </div>
            <div class="title-text">{{ custInfoCount.invite_num || 0 }}</div>
        </div>
        <div class="container-item">
            <div class="title">
                未邀请客户
                <el-tooltip content="通过该活码，添加的成员客户数，包含删除员工，算累计值。" placement="top">
                    <img class="help_icon" src="@/assets/image/customer/help_icon.png" alt="" />
                </el-tooltip>
            </div>
            <div class="title-text">{{ custInfoCount.not_invite_num || 0 }}</div>
        </div>
        <div class="container-item">
            <div class="title">
                已入群客户
                <el-tooltip content=" 通过该活码，添加成员后进入该群的客户数，其中入群再退群的人数" placement="top">
                    <img class="help_icon" src="@/assets/image/customer/help_icon.png" alt="" />
                </el-tooltip>
            </div>
            <div class="title-text">{{ custInfoCount.join_groupchat_num || 0 }}</div>
        </div>
        <div class="container-item">
            <div class="title">未入群客户</div>
            <div class="title-text">{{ custInfoCount.not_join_groupchat_num || 0 }}</div>
        </div>
    </div>
</template>
<script setup lang="ts">
// import {male} from '@element-plus/icons-vue'
import Dialog from '@/components/Dialog.vue';
import { watch, reactive, ref, nextTick } from 'vue';
import { groupchatBasic } from '@/api/groupManageList';
import { getSetionId, IsNotEmpty } from '@/utils/utils';
const ZWTableSearchRef = ref(null);
const props = defineProps(['id']);

const custInfoCount = ref({});

const groupchatBasicFun = () => {
    groupchatBasic({ pull_id: props.id }).then((r: any) => {
        custInfoCount.value = r || {};
    });
};
nextTick(() => {
    groupchatBasicFun();
});
</script>
<style lang="scss" scoped>
.container {
    background-color: #fff;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 24px;
    margin-top: 16px;
    border: 1px solid #eaeaea;
    border-bottom: 1px solid #ffc69e;

    .top-title {
        font-size: 16px;
        font-family: PingFangSC-Regular, 'PingFang SC';
        font-weight: 400;
        color: #35383a;
        padding-top: 10px;
        padding-bottom: 16px;

        .active {
            color: #ff6b00;
        }
    }

    .container-item {
        text-align: left;

        .title {
            display: flex;
            align-items: center;
            font-size: 14px;
            font-family: PingFangSC-Regular, 'PingFang SC';
            font-weight: 400;
            color: #666;
            line-height: 20px;
        }

        .title-text {
            padding-top: 8px;
            font-size: 30px;
            font-family: HelveticaNeue-Medium, HelveticaNeue;
            font-weight: 500;
            color: #33302d;
            line-height: 36px;
        }
    }

    .line-item {
        width: 1px;
        height: 60px;
        background-color: #f0f0f0;
        border-radius: 1px;
    }
}

.filter_header {
    margin-top: 20px;
    margin-bottom: 20px;
}

.cust_box {
    display: flex;
    align-items: center;

    .user_icon {
        width: 50px;
        margin-right: 10px;
    }

    .isMale {
        width: 18px;
        line-height: 18px;
        border-radius: 50%;
        display: inline-block;
        color: #fff;
        background-color: #75ddf4;
        text-align: center;
        margin-left: 5px;
    }

    .isfeMale {
        background-color: #f474bf;
    }
}

.help_icon {
    cursor: pointer;
    width: 14px;
    height: 14px;
}
</style>
